/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-07-08 11:07:01
 * @LastEditors: cuidm
 * @LastEditTime: 2022-09-30 13:35:49
 */
import React, { useState, useEffect, useRef } from "react";
import { Tabs, Row, Col, Space, List, Typography} from "antd";
import { ProDescriptions } from '@ant-design/pro-components';
import { ArrowLeftOutlined, UploadOutlined, DownloadOutlined, SelectOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { CmdbContent, CmdbHeader, TempImportModal } from "@/components";
import cmdbres from "@/data/cmdbres";
import request from "@/utils/request";
import ClusterTemplateInstance from "./instance";
import "./index.less";

const { TabPane } = Tabs;
const ClusterTemplateDetail = ({ history, match, location }) => {
    const id = match.params.id;
    const [template, setTemplate] = useState({});
    const columns = [
        {
            title: '模版ID',
            key: 'id',
            dataIndex: 'id',
        },
        {
            title: '模版名称',
            key: 'name',
            dataIndex: 'name',
        },
        {
            title: '服务名称',
            key: 'serviceCategoryId',
            dataIndex: 'serviceCategoryId',
            render: (text, record, index)=> {
                const serviceTemplates = record.serviceTemplates;
                // return (
                //     <div>
                //         {
                //             serviceTemplates?.map(item=>(
                //                 <span style={{display: 'block'}}>{item.name} / {item.id}</span>
                //             ))
                //         }
                //     </div>
                // )
                return (
                    <List
                        bordered
                        dataSource={serviceTemplates}
                        renderItem={item => (
                            <List.Item>
                                <i className='mo'>模</i>
                                {item.name} &nbsp;&nbsp;
                                <Typography.Text mark>[{item.id}]</Typography.Text> 
                            </List.Item>
                        )}
                        />
                )
            }
        }
    ];
    const querySetTemplateRelations = async (t) => {
		try {
            const res = await request({
                ...cmdbres.querySetTemplateRelations(t.id),
            });
            if (res && res.data) {
                const serviceTemplates = res.data;
                setTemplate({...t, serviceTemplates});
            }
        } catch (error) {
            console.log(error);
        } 
	}

    useEffect(() => {
        const t = location?.state?.template??{};
        querySetTemplateRelations(t);
    }, []);

    const [activeKey, setActiveKey] = useState('config');
    const handleTabOnChange = (tab) => {
        setActiveKey(tab)
    }

    return (
        <CmdbContent>
            <div className="cmdb_host_pane business">
                <div className="breadcrumbs-layout">
                    <h3><ArrowLeftOutlined 
                        onClick={() => { history.push({
                            pathname: "/business/clusterTemplate",
                        });}}
                    /> 模板详情
                    </h3>
                </div>
                <Tabs defaultActiveKey={activeKey} size="large" style={{ padding: '5px 0px', margin: 0}} onChange={handleTabOnChange}>
                    <TabPane tab="集群模板配置" key="config">
                        <ProDescriptions
                            column={2}
                            title={"基本属性"}
                            dataSource={template}
                            columns={columns}
                            style={{padding: "20px"}}
                        >
                        </ProDescriptions>
                    </TabPane>
                    {/* <TabPane tab="集群模板实例" key="instance">
                        <ClusterTemplateInstance history={history} setTemplateId={id} />
                    </TabPane> */}
                </Tabs>
            </div>
        </CmdbContent>
    )
}

export default ClusterTemplateDetail;